<template>
  <!--办理过程-->
  <div class="view" :style="{ '--theme': $store.getters.themeColor }">
    <!-- <el-row>
      <span class="title-class"
        ><div class="title">
          <span class="icon"></span><span class="title-name">进行过程</span>
        </div></span
      >
    </el-row> -->
    <!--<custom-title name="进行过程"></custom-title>-->
    <el-row>
      <el-table
        border
        style="width: 100%"
        :data="viewDataSouse"
      >
        <el-table-column
          label="处理环节"
          prop="linkName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="处理人"
          prop="processName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="环节类型"
          prop="flowLinkType"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{getFlowLinkTypeName(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选择环节"
          prop="nextLinkName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="选择处理人"
          align="center"
          min-width="85"
          :show-overflow-tooltip="false"
        >
          <template slot-scope="scope">
            <CustomTooltip :content="scope.row.enableAcceptanceMode === '1' || scope.row.enableAcceptanceMode === '2' ? '': scope.row.nextLinkProcessName"></CustomTooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="接收时间"
          prop="flowNodeTime"
          align="center"
          min-width="130"
        ></el-table-column>
        <el-table-column
          label="办理完成时间"
          prop="flowEndTime"
          align="center"
          min-width="130"
        ></el-table-column>
        <el-table-column
          label="办理时长"
          prop="duration"
          :formatter="durationFunc"
          align="center"
        ></el-table-column>
        <el-table-column
          label="办理意见"
          align="center"
          :show-overflow-tooltip="false"
        >
          <template slot-scope="{row}">
            <CustomTooltip :content="row.remark"></CustomTooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import CustomTitle from '@/components/eventManagement/Title.vue'
import CustomTooltip from "@/components/table/CustomTooltip.vue";
export default {
  name: "underwayProcess",
  components: {
    CustomTooltip,
    CustomTitle,
  },
  props: {
    viewDataSouse: {
      //视图数据源
      type: Array,
      default: [],
    },
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return (
        "background: #F8F8F8;\n" +
        "border-radius: 5px 0px 0px 0px;\n" +
        "border: 1px solid #EEEEEE;\n" +
        "font-size: 14px;\n" +
        "font-family: PingFangSC-Regular, PingFang SC;\n" +
        "font-weight: 400;\n" +
        "color: #333333;\n" +
        "height: 40px;" +
        "text-align: center;"
      );
    },
    durationFunc(row) {
      if (row.flowEndTime != null && row.flowEndTime != "") {
        return this.timediff(
          Date.parse(row.flowNodeTime),
          Date.parse(row.flowEndTime)
        );
      } else {
        return "";
      }
    },
    timediff(begin_time, end_time) {
      var starttime = "";
      var endtime = "";
      if (begin_time < end_time) {
        starttime = begin_time;
        endtime = end_time;
      } else {
        starttime = end_time;
        endtime = begin_time;
      }
      //计算天数
      var timediff = (endtime - starttime) / 1000;
      var days = parseInt(timediff / 86400);
      //计算小时数
      var remain = timediff % 86400;
      var hours = parseInt(remain / 3600);
      //计算分钟数
      var remain = remain % 3600;
      var mins = parseInt(remain / 60);
      //计算秒数
      var secs = remain % 60;

      var res = days + "天" + hours + "小时" + mins + "分钟" + secs + "秒";
      return res;
    },
    getFlowLinkTypeName(val){
        switch (val.flowLinkType) {
        case "0":
          return "正常流转";
        case "1":
          return "转派";
        case "2":
          return "回退";
        case "3":
          return "受理"
      }
      return "";
    }
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);
.view {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  //border-radius: 8px;
}

// .title-class {
//   display: inline-block;
// }

// .title {
//   height: 3vh;
//   background: $theme;
//   border-radius: 17px;
//   margin-top: 1vh;
//   /*margin-left: 3vh;*/
//   display: flex;
//   align-items: center;
// }

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}

.title-name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-right: 2vh;
}

.titleName {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  font-size: 10px;
  padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #98a0a7;
}

.value {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  padding: 0.3vh 0px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: contents;
}

.el-row {
  margin-bottom: 2vh;
}
</style>
